<template>
  <div class="indexall">
    <el-container class="all">
      <el-aside width="80px"><the-nav></the-nav></el-aside>
      <el-container>
        <el-header>
          <the-header></the-header>
        </el-header>
        <el-main>
          <div class="main"><blog-card></blog-card></div>
          <div class="rightbar"><the-border></the-border></div
        ></el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import { ref } from "vue";
import TheBorder from "@/components/layout/TheBorder.vue";
export default {
  components: { TheBorder },
  setup() {
    const userInfo = ref(null);
    const postList = ref(null);
    const id = localStorage.getItem("id");
    async function fetchUserInfo() {
      // 获取用户信息
    }
    async function fetchBlogList() {
      // 获取博客列表
    }
    return {
      id,
      userInfo,
      postList,
      fetchUserInfo,
      fetchBlogList,
    };
  },
};
</script>

<style scoped>
#app,
html,
.indexall,
.el-container {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
.el-aside {
  background-color: #2d3a4b;
  height: 100%;
}
/* 头部样式 */
.el-header {
  display: flex; /* 弹性布局 */
  flex-shrink: 0;
  position: absolute;
  line-height: 50px;
  top: 0px;
  right: 0px;
  height: 49px;
  width: 100%;
  background-color: #2d3a4b;
  z-index: 1;
}

/* 主区域 */
.main {
  margin: 3%;
  display: flex;
  position: absolute;
  top: 50px;
  left: 80px;
  right: 230px;
  padding: 0px;

  /* overflow-y: auto;  */
  /* background-color: red; */
}
.rightbar {
  display: flex;

  border: forestgreen solid 1px; /* 边框 */
  height: 318px;
  margin-right: 0px;
  position: absolute;
  width: 230px;
  top: 50px; /* 距离上面50像素 */
  right: 0px;
  bottom: 0px;
  padding: 2px;
  background-color: floralwhite;
  box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.2);
  border-radius: 1%;
}
</style>
